﻿@model AddSpotCommentModel
@using Nop.Core;
@using Nop.Core.Infrastructure;
@using Nop.Web.Models.WindAlert;

@{
    Layout = "~/Views/Shared/_ColumnsTwo.cshtml";
    Html.AppendScriptParts("~/Windalert/Scripts/jquery.autosize.js");
    Html.AppendScriptParts("~/Windalert/Scripts/jquery.limit-1.2.source.js");
}

<script type="text/javascript">

    $(function () {

        $('textarea.comment-textarea').autosize({ append: "\n" });
        $('textarea.comment-textarea').limit(100, '#charsLeft');
    });

</script>

<script type="text/javascript">

    $(function () {
        LoadStations();

        $("#SpotIdSort").change(function () {
            LoadStations();
        });
    });

    function LoadStations() {
        var selectedItem = $("#SpotIdSort").val();
        var CommentsList = $("#comments-list");
        var commentsListProgress = $("#commentList-loading-progress");
        commentsListProgress.show();
        $.ajax({
            url: '@Url.Action("SpotCommentsList", "WSpot")',
            data: { "spotId": selectedItem },
            dataType: 'html',
            success: function (data) {
                $('#comments-list').html(data);
                commentsListProgress.hide();
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert('Failed to retrieve comments list.');
                commentsListProgress.hide();
            }
        });
    }
</script>

<div class="panel panel-default form-panel">
    <div class="panel-heading">
        <h3>@T("Windalert.Spot.Comments.AddYourComment")</h3>
    </div>
    <div class="panel-body">
        @using (Html.BeginForm("Spot", "WSpot", FormMethod.Post, new { enctype = "multipart/form-data", name = "frm", id = "frm" }))
        {
            <div class="form-group row">
                <div class="col-md-6">
                    @Html.DropDownList("SpotId", Model.AvailableSpots, new { @class = "form-control" })
                </div>
                <div class="col-md-6">
                    @Html.ValidationMessageFor(model => model.SpotId)
                </div>
            </div>
            <div class="form-group row">
                <div class="col-md-6">
                    @T("WindAlert.Spot.Comments.CharsLeft"): <span id="charsLeft"></span>
                    <br />
                    @Html.TextAreaFor(model => model.CommentText, new { Name = "CommentText", id = "CommentText", @class = "comment-textarea enquiry form-control", placeholder = T("WindAlert.Spot.Comments.AddYourComment").Text })
                </div>
                <div class="col-md-6">
                    @Html.ValidationMessageFor(model => model.CommentText)
                </div>
            </div>
            <div class="form-group row">
                <div class="col-md-6">
                    <input type="file" id="uploadedFile" name="uploadedFile" />
                </div>
                <div class="col-md-6">
                    (@String.Format(T("Windalert.Spot.Comments.MaximumUploadedFileSize").Text, Model.PictureMaximumSizeBytes / 1048576))
                </div>
            </div>
            <div class="form-group row">
                <div class="col-md-6">
                    <input name="add-comment" class="btn btn-primary" type="submit" value="@T("WindAlert.Spot.Comments.SubmitButton")" />
                </div>
            </div>
        }
    </div>
</div>
@using (Html.BeginForm())
{
    <div class="panel panel-default form-panel">
        <div class="panel-heading">
            <h3>@T("Windalert.Spot.Comments")</h3>
        </div>
        <div class="panel-body">
            <div class="form-group row">
                <div class="col-md-2">
                    @T("Windalert.Spot.Comments.Sort"):
                </div>
                <div class="col-md-3">
                    @Html.DropDownList("SpotIdSort", Model.AvailableSpotsSort, new { @class = "form-control" })
                </div>
            </div>
            <div class="row">
                <div class="col-md-8" id="comments-list">
                    <span id="commentList-loading-progress" style="display: none;" class="please-wait">@T("Common.Wait...")</span>
                </div>
                <div class="col-md-4">

                </div>
            </div>
        </div>
    </div>
}
